import { useNavigate } from "react-router-dom";

import { PointGiftO } from "@react-vant/icons";
import dayjs from "dayjs";

function PageMsg({ list, IconFont }) {
  const navigate = useNavigate();
  return (
    <>
      <ul>
        <li
          style={{
            height: "60px",
            display: "flex",
            padding: "20px 20px 5px 10px",
          }}
          onClick={() => {
            navigate("/outlet/ord-lx");
          }}
        >
          <IconFont
            name="icon-zhifu-copy"
            style={{
              width: "30px",
              height: "30px",
              borderRadius: "50%",
              backgroundColor: "#88C643",
              padding: "5px",
            }}
          />
          <div
            style={{
              marginLeft: "20px",
              borderBottom: "1px solid #eee",
              width: "90%",
            }}
          >
            <p>订单消息</p>
            <p
              style={{ fontSize: "12px", color: "#999", margin: "10px 0 0 0" }}
            >
              您的订单状态已更新
            </p>
          </div>
        </li>
      </ul>

      <ul>
        <li
          style={{
            height: "60px",
            display: "flex",
            padding: "20px 20px 5px 10px",
          }}
          onClick={() => {
            navigate("/outlet/act");
          }}
        >
          <PointGiftO
            style={{
              width: "30px",
              height: "30px",
              color: "#fff",
              borderRadius: "50%",
              backgroundColor: "#FF7353",
              padding: "5px",
            }}
          />

          <div
            style={{
              marginLeft: "20px",
              borderBottom: "1px solid #eee",
              width: "90%",
            }}
          >
            <p>活动通知</p>
            <p
              style={{ fontSize: "12px", color: "#999", margin: "10px 0 0 0" }}
            >
              活动即将开启，请注意查看
            </p>
          </div>
        </li>
      </ul>


      {list.map((item, index) => (
        <ul key={index}>
          {item.shopList.map((order, index) => (
            <li
              key={index}
              style={{
                height: "60px",
                display: "flex",
                padding: "20px 20px 5px 10px",
              }}
              onClick={() => {
                navigate(`/outlet/chat?name=${order.shop_name}`);
              }}
            >
              <img
                src={order.shop_img}
                alt=""
                style={{ width: "40px", height: "40px", borderRadius: "50%" }}
              />
              <div
                style={{
                  marginLeft: "20px",
                  borderBottom: "1px solid #eee",
                  width: "90%",
                }}
              >
                <p
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                  }}
                >
                  <p>{order.shop_name}</p>
                  <p style={{ fontSize: "12px", color: "#999" }}>
                    {dayjs(
                      order.chatList[order.chatList.length - 1]?.time
                    ).format("YYYY年MM月DD日")}
                  </p>
                </p>

                <p
                  style={{
                    fontSize: "12px",
                    color: "#999",
                    margin: "10px 0 0 0",
                  }}
                >
                  {order.chatList[order.chatList.length - 1]?.content}
                </p>
              </div>
            </li>
          ))}
        </ul>
      ))}
    </>
  );
}

export default PageMsg;
